<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <script src="/assets/user/js/jquery.min.js"></script>  
    <title></title>  
    <script>  
        $(function () {  
            //SKU信息  
            $(".div_contentlist label").bind("change", function () {  
                step.Creat_Table();  
            });  
            var step = {  
                //SKU信息组合  
                Creat_Table: function () {  
                    step.hebingFunction();  
                    var SKUObj = $(".Father_Title");  
                    //var skuCount = SKUObj.length;//  
                    var arrayTile = new Array();　//标题组数  
                    var arrayInfor = new Array();　//盛放每组选中的CheckBox值的对象   
                    var arrayColumn = new Array();//指定列，用来合并哪些列  
                    var bCheck = false;//是否全选  
                    var columnIndex = 0;  
                    $.each(SKUObj, function (i, item) {  
                        arrayColumn.push(columnIndex);  
                        columnIndex++;  
   
                        arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));  
                        var itemName = "Father_Item" + i;  
                        //选中的CHeckBox取值  
                        var order = new Array();  
                        $("." + itemName + " input[type=checkbox]:checked").each(function () {  
                            order.push($(this).val());  
                        });  
                        arrayInfor.push(order);  
   
                        if (order.join() == "") {  
                            bCheck = false;  
                        }  
                        //var skuValue = SKUObj.find("li").eq(index).html();  
                    });  
   
                    //开始创建Table表              
                    if (bCheck == true) {  
                        var RowsCount = 0;  
                        $("#createTable").html("");  
                        var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>");  
                        table.appendTo($("#createTable"));  
                        var thead = $("<thead></thead>");  
                        thead.appendTo(table);  
                        var trHead = $("<tr></tr>");  
                        trHead.appendTo(thead);  
                        //创建表头  
                        $.each(arrayTile, function (index, item) {  
                            var td = $("<td>" + item + "</td>");  
                            td.appendTo(trHead);  
                        });  
                        var itemColumHead = $("<td  style=\"width:70px;\">价格</td><td style=\"width:70px;\">数量</td> ");  
                        itemColumHead.appendTo(trHead);  
                        //var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");  
                        //itemColumHead2.appendTo(trHead);  
   
                        var tbody = $("<tbody></tbody>");  
                        tbody.appendTo(table);  
   
                        ////生成组合  
                        var zuheDate = step.doExchange(arrayInfor);  
                        if (zuheDate.length > 0) {  
                            //创建行  
                            $.each(zuheDate, function (index, item) {  
                                var td_array = item.split(",");  
                                var tr = $("<tr></tr>");  
                                tr.appendTo(tbody);  
                                $.each(td_array, function (i, values) {  
                                    var td = $("<td>" + values + "</td>");  
                                    td.appendTo(tr);  
                                });  
                                var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");  
                                td1.appendTo(tr);  
                                var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");  
                                td2.appendTo(tr);  
                                //var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");  
                                //td3.appendTo(tr);  
                                //var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");  
                                //td4.appendTo(tr);  
                            });  
                        }  
                        //结束创建Table表  
                        arrayColumn.pop();//删除数组中最后一项  
                        //合并单元格  
                        $(table).mergeCell({  
                            // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始  
                            cols: arrayColumn  
                        });  
                    }  
                },//合并行  
                hebingFunction: function () {  
                    $.fn.mergeCell = function (options) {  
                        return this.each(function () {  
                            var cols = options.cols;  
                            for (var i = cols.length - 1; cols[i] != undefined; i--) {  
                                // fixbug console调试   
                                // console.debug(cols[i]);   
                                mergeCell($(this), cols[i]);  
                            }  
                            dispose($(this));  
                        });  
                    };  
                    // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法              
                    function mergeCell($table, colIndex) {  
                        $table.data('col-content', ''); // 存放单元格内容   
                        $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1   
                        $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象   
                        $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用   
                        // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan   
                        $('tbody tr', $table).each(function (index) {  
                            // td:eq中的colIndex即列索引   
                            var $td = $('td:eq(' + colIndex + ')', this);  
                            // 取出单元格的当前内容   
                            var currentContent = $td.html();  
                            // 第一次时走此分支   
                            if ($table.data('col-content') == '') {  
                                $table.data('col-content', currentContent);  
                                $table.data('col-td', $td);  
                            } else {  
                                // 上一行与当前行内容相同   
                                if ($table.data('col-content') == currentContent) {  
                                    // 上一行与当前行内容相同则col-rowspan累加, 保存新值   
                                    var rowspan = $table.data('col-rowspan') + 1;  
                                    $table.data('col-rowspan', rowspan);  
                                    // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响   
                                    $td.hide();  
                                    // 最后一行的情况比较特殊一点   
                                    // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan   
                                    if (++index == $table.data('trNum'))  
                                        $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));  
                                } else { // 上一行与当前行内容不同   
                                    // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理   
                                    if ($table.data('col-rowspan') != 1) {  
                                        $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));  
                                    }  
                                    // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan   
                                    $table.data('col-td', $td);  
                                    $table.data('col-content', $td.html());  
                                    $table.data('col-rowspan', 1);  
                                }  
                            }  
                        });  
                    }  
                    // 同样是个private函数 清理内存之用   
                    function dispose($table) {  
                        $table.removeData();  
                    }  
                },  
                //组合数组  
                doExchange: function (doubleArrays) {  
                    var len = doubleArrays.length;  
                    if (len >= 2) {  
                        var arr1 = doubleArrays[0];  
                        var arr2 = doubleArrays[1];  
                        var len1 = doubleArrays[0].length;  
                        var len2 = doubleArrays[1].length;  
                        var newlen = len1 * len2;  
                        var temp = new Array(newlen);  
                        var index = 0;  
                        for (var i = 0; i < len1; i++) {  
                            for (var j = 0; j < len2; j++) {  
                                temp[index] = arr1[i] + "," + arr2[j];  
                                index++;  
                            }  
                        }  
                        var newArray = new Array(len - 1);  
                        newArray[0] = temp;  
                        if (len > 2) {  
                            var _count = 1;  
                            for (var i = 2; i < len; i++) {  
                                newArray[_count] = doubleArrays[i];  
                                _count++;  
                            }  
                        }  
                        //console.log(newArray);  
                        return step.doExchange(newArray);  
                    }  
                    else {  
                        return doubleArrays[0];  
                    }  
                }  
            }  
            return step;  
        })  
    </script>  
   
    <style type="text/css">  
        form {  
            margin: 0;  
        }  
   
        textarea {  
            display: block;  
        }  
    </style>  
   
    <style>  
        .chcBox_Width {  
            width: 18px;  
        }  
   
        .li_width {  
            width: 110px;  
        }  
   
        .guige_ul {  
            padding-left: 20px;  
            background-color: #F8F8F8;  
        }  
   
        .table_head {  
            line-height: 23px;  
            margin-left: 20px;  
            border-color: #D7D7D7;  
        }  
    </style>  
    <link href="Content/css/addProduct.css" rel="stylesheet" />  
</head>  
<body style="padding: 10px">  
    <div id="navtab1" style="width: 100%; border: 1px solid #A3C0E8;">  
        <div title="扩展信息" tabid="tabItem3">  
            <div id="Div1">  
                <div position="center">  
                    <div style="padding: 5px 8px;" class="div_content">  
                        <div class="div_title">  
                            <span class="infor_title"> </span>产品规格       
                            <div>  
                                <hr />  
                            </div>  
                        </div>  
   
                        <div class="div_contentlist">  
                            <ul class="Father_Title">  
                                <li>颜色分类：</li>  
                            </ul>  
                            <ul class="Father_Item0" style="padding-left: 20px; background-color: #F8F8F8;">  
                                <li class="li_width1">  
                                    <label>  
                                        <input id="Checkbox3" type="checkbox" class="chcBox_Width" value="军绿色" />军绿色<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox1" type="checkbox" class="chcBox_Width" value="花色" />花色<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox2" type="checkbox" class="chcBox_Width" value="蓝色" />蓝色<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox4" type="checkbox" class="chcBox_Width" value="褐色" />褐色<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox5" type="checkbox" class="chcBox_Width" value="黄色" />黄色<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox6" type="checkbox" class="chcBox_Width" value="黑色" />黑色<span class="li_empty"> </span></label></li>  
   
                            </ul>  
                            <ul class="Father_Title">  
                                <li>尺寸：</li>  
                            </ul>  
                            <ul class="Father_Item1" style="padding-left: 20px; background-color: #F8F8F8;">  
   
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox7" type="checkbox" class="chcBox_Width" value="41" />41<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox8" type="checkbox" class="chcBox_Width" value="42" />42<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox9" type="checkbox" class="chcBox_Width" value="43" />43<span class="li_empty"> </span></label></li>  
   
   
                            </ul>  
                            <ul class="Father_Title">  
                                <li>类型：</li>  
                            </ul>  
                            <ul class="Father_Item2" style="padding-left: 20px; background-color: #F8F8F8;">  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox10" type="checkbox" class="chcBox_Width" value="港澳台" /><span class="Color_Name">港澳台</span><span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox11" type="checkbox" class="chcBox_Width" value="韩国" />韩国<span class="li_empty"> </span></label></li>  
                                <li class="li_width">  
                                    <label>  
                                        <input id="Checkbox12" type="checkbox" class="chcBox_Width" value="亚太" />亚太<span class="li_empty"> </span></label></li>  
                            </ul>  
   
                        </div>  
                        <div class="div_contentlist2">  
                            <ul>  
                                <li>  
                                    <div id="createTable">  
                                    </div>  
                                </li>  
                            </ul>  
                            <ul>  
                                <li>  
                                    <input type="button" id="Button1" class="l-button" value="提交" />  
                                </li>  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</body>  
</html>